<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>dijit.layout.BorderContainer Test - Full Screen</title>

	<style type="text/css">
		@import "../../../../dijit/themes/claro/document.css";
		@import "../../../../dijit/tests/css/dijitTests.css";

		html, body, #main{
			width: 100%;	/* make the body expand to fill the visible window */
			height: 100%;
			overflow: hidden;	/* erase window level scrollbars */
			padding: 0 0 0 0;
			margin: 0 0 0 0;
			font: 10pt Arial,Myriad,Tahoma,Verdana,sans-serif;
		}
	</style>

	<!-- required: the default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../../../dijit/themes/claro/claro.css"/>

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../../dojo/dojo.js"
		data-dojo-config="isDebug: true, parseOnLoad: true"></script>

	<!-- only needed for alternate theme testing: do NOT use in your code! -->
	<script type="text/javascript" src="../../../../dijit/tests/_testCommon.js"></script>

	<script type="text/javascript">
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dijit.layout.BorderContainer");
		dojo.require("dijit.layout.ContentPane");
		dojo.require("dijit.form.FilteringSelect");
	</script>

</head>
<body class="claro" role="main">
	<div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='design:"sidebar" '>
		<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"main-leading", region:"leading", style:"background-color: #acb386; width: 100px;"'>
			leading
		</div>
		<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"main-top", region:"top", style:"background-color: #b39b86; height: 100px;"'>
			top bar
		</div>
		<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"main-center", region:"center", style:"background-color: #f5ffbf; padding: 10px;"'>
			main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
			(to check we're copying children around properly).<br />
			<select aria-label="select" data-dojo-type="dijit/form/FilteringSelect">
				<option value="1">foo</option>
				<option value="2">bar</option>
				<option value="3">baz</option>
			</select>
			Here's some text that comes AFTER the combo box.
		</div>
		<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"main-bottom", region:"bottom", style:"background-color: #b39b86; height: 100px;", splitter:true'>
			bottom bar
		</div>
		<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"main-trailing", region:"trailing", style:"background-color: #acb386; width: 100px;", splitter:true'>
			trailing
		</div>
	</div>
</body>
</html>
